<template>
	<el-row  class="samples-container">
		<el-col :span="24">
			<codemirror-editor
				:code="contentText"
			/>
		</el-col>
	</el-row >

	<!-- 可拖拽缩放 -->
	<!-- <ResizablePane :defaultCodeWidth="defaultCodeWidth" :minCodeWidth="minCodeWidth">
	  <template #code>
		<ExperienceEditor :code="contentText" @codeChange="codeChange" />
	  </template>
	  <template #render>
		<iframe
		  :src="contentText"
		  unselectable="on"
		  frameborder="0"
		  scrolling="no"
		  ref="renderer"
		  allowfullscreen
		  style="width: 100%; height: 100%;"
		></iframe>
	  </template>
	</ResizablePane> -->

</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CodemirrorEditor } from './index.js';

const route = useRoute()
const defaultCodeWidth = 500
const minCodeWidth = 0
const codeVisible = ref(true)
const renderer = ref(null)
const contentText = ref(null)
const sourceCodePath = ref(null)

onMounted(() => {
	codePath()
})

// 代码路径
const codePath = async () => {
	try {
		const code = await fetch(`code/hello.html`);
		// const code = await fetch('../src/views/Demo/examples/1-1.vue');
		contentText.value = await code.text();
	} catch (error) {
		console.error(error);
		ElMessage.warning(error);
	}
}


</script>

<style lang="scss" scoped>
.samples-container {
	height: 100vh;
	.samples-render {
		position: relative;
		.code-operate {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			&-icon {
				width: 40px;
				&:hover {
					height: 100px;
					cursor: pointer;
				}
			}
		}
	}
}
</style>
